<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>俄罗斯方块 - 益智小游戏网站</title>
    <link rel="stylesheet" href="../css/styles.css">
</head>
<body>
    <header>
        <div class="container">
            <h1>益智小游戏合集</h1>
            <nav>
                <ul>
                    <li><a href="../index.html">首页</a></li>
                    <li><a href="snake.html">贪吃蛇</a></li>
                    <li><a href="tetris.html">俄罗斯方块</a></li>
                    <li><a href="memory.html">记忆翻牌</a></li>
                    <li><a href="settings.html">游戏设置</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main>
        <div class="container">
            <div class="game-container">
                <h2>俄罗斯方块</h2>
                
                <div class="game-info">
                    <div class="game-info-item">
                        分数: <span id="score">0</span>
                    </div>
                    <div class="game-info-item">
                        最高分: <span id="highScore">0</span>
                    </div>
                    <div class="game-info-item">
                        时间: <span id="timer">00:00</span>
                    </div>
                    <div class="game-info-item">
                        等级: <span id="level">1</span>
                    </div>
                </div>

                <div class="game-area">
                    <canvas id="tetrisCanvas" width="300" height="600"></canvas>
                </div>

                <div class="game-controls">
                    <button id="startBtn" class="btn">开始游戏</button>
                    <button id="pauseBtn" class="btn" disabled>暂停</button>
                    <button id="resetBtn" class="btn">重置</button>
                </div>

                <div class="game-instructions">
                    <h3>游戏说明</h3>
                    <ul>
                        <li>使用方向键左右移动方块</li>
                        <li>使用上方向键旋转方块</li>
                        <li>使用下方向键加速下落</li>
                        <li>使用空格键直接下落到底部</li>
                        <li>填满一行即可消除得分</li>
                    </ul>
                </div>
            </div>
        </div>
    </main>

    <footer>
        <div class="container">
            <p>&copy; 2024 益智小游戏网站. 保留所有权利.</p>
        </div>
    </footer>

    <script src="../js/main.js"></script>
    <script src="../js/tetris.js"></script>
</body>
</html>